<template>
  <div class="login-box" v-loading="false">
    <el-form
      ref="form"
      :model="loginForm"
      :rules="rules"
      size="large"
      label-width="120px"
      class="login-form"
      v-loading="load"
    >
      <el-form-item label="账号" prop="username" required>
        <el-input
          v-model="loginForm.username"
          placeholder="请输入账号"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password" required>
        <el-input
          v-model="loginForm.password"
          placeholder="请输入密码"
          type="password"
        ></el-input>
      </el-form-item>
      <el-form-item label="角色" prop="auth">
        <el-radio-group v-model="loginForm.auth">
          <el-radio label="normal">普通</el-radio>
          <el-radio label="admin">管理员</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="remember">
        <el-checkbox v-model="loginForm.remember">自动登录</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button @click="login" type="primary">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { post } from "../../network/index";
import Cookies from "js-cookie";
import { onMounted, reactive, ref } from "vue-demi";
import { ElMessage } from "element-plus";
import { Base64 } from "js-base64";

export default {
  setup() {
    onMounted(() => {});
    const loginForm = ref({
      username: "admin",
      password: "admin",
      auth: "normal",
      remember: false,
    });
    const rules = reactive({
      username: [{ required: true, message: "用户名不为空" }],
      password: [{ required: true, message: "密码不为空" }],
    });
    const form = ref(null);
    const load = ref(false);
    function encrypt(str) {
      return Base64.encode(str);
    }
    function login() {
      form.value.validate((valid) => {
        if (valid) {
          const data = {
            username: encrypt(loginForm.value.username),
            password: encrypt(loginForm.value.password),
            auth: loginForm.value.auth,
          };
          load.value = true;
          post({
            path: "user/login",
            data,
          })
            .then((res) => {
              let _data = res.data;
              ElMessage.success("登录成功");
              Cookies.set("user", data.username);
              Cookies.set("token", _data.token, {
                expires: 1,
                path: "/",
              });
              Cookies.set("key", _data.p_k, {
                expires: 1,
                path: "/",
              });
              load.value = false;
            })
            .catch(() => {
              load.value = false;
            });
        } else {
          ElMessage.error("表单错误");
        }
      });
    }
    return {
      loginForm,
      rules,
      form,
      login,
      load,
    };
  },
};
</script>

<style scoped lang="scss">
.login-box {
  background-color: white;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  // min-height: 600px;
  .login-form {
    width: 420px;
  }
}
</style>